/*
 * 职员列表
 * @Author: yudong
 * @Date: 2018-03-27 17:53:05
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-26 18:09:25
 */
<style lang="less" rel="stylesheet/less" type="text/less">

    .v-store-staff-index {
        .ivu-table {
            .ivu-table-header {
                th {
                    text-align: center;
                }

            }
        }
    }

</style>
<template>
	<div class="v-store-staff-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="staffs"
			:height="tableHeight()"
			border
			class="personal-scrollbar"
			@on-sort-change="sortable"/>

	</div>
</template>

<script>

import { mapGetters } from 'vuex';

import Button from 'iview/src/components/button';

import { computedTableHeight } from 'src/views/mixins/computedTableHeight';

export default {
	name: 'StaffIndex',
	mixins: [computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		staffs: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('staff.account'),
					key: 'account',
					align: 'center',
					render: (h, { row }) => <div> { row.account || '-' } </div>,
				},
				{
					title: this.$t('staff.name'), // '职员名称',
					key: 'name',
					align: 'center',
					render: (h, { row }) => <div> { row.name || '-' } </div>,
				},
				{
					title: this.$t('staff.phone'), // '电话',
					key: 'phone',
					align: 'center',
					render: (h, { row }) => <div> { row.phone || '-' } </div>,
				},
				{
					title: this.$t('staff.gander'), // ' '性别',
					key: 'sex',
					align: 'center',
					render: (h, { row }) => <div> { this.showGender(row.sex) } </div>,
				},
				{
					title: this.$t('staff.role'), // '职员身份',
					key: 'roles',
					align: 'center',
					render: (h, { row }) => {
						let role = '';
						if (row.roles && row.roles.length > 0) {
							if (this.$i18n.locale === 'zh-CN') {
								role = row.roles.map(item => item.name).join(',');
							} else { // 英文
								role = row.roles.map(item => item.const.toLowerCase().replace('_', ' ')).join(',');
							}
						} else {
							role = this.$t('common.unknown');
						}
						return (<div>{ role }</div>);
					},
				},
				// {
				// 	title: this.$t('staff.born_at'), // '出生日期',
				// 	key: 'born_at',
				// 	align: 'center',
				// 	render: (h, { row }) => <div> { row.born_at ? row.born_at.split(' ').shift() : '未知' } </div>,
				// },
				{
					title: this.$t('staff.create_at'), // '开通时间',
					key: 'created_at',
					width: 200,
					align: 'center',
					render: (h, { row }) => <div> { !row.created_at ? '-' : row.created_at } </div>,
				},
				{
					title: this.$t('staff.operation'), //  '操作',
					align: 'center',
					width: 220,
					render: (h, { row }) => (
						<div class="nowrap">
							<Button name="index__edit" size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('edit', row); }} type="primary">
								{ this.$t('staff.update') }
							</Button>
							{
								row.is_deleted
									?
									<Button name="index__recover" size="small" on-click={() => { this.$emit('recovery', row); }} type="success">
										{ this.$t('staff.recover') }
									</Button>
									:
									<Button name="index__disable" size="small" on-click={() => { this.$emit('delete', row); }} type="error">
										{ this.$t('staff.disuse') }
									</Button>
							}
							{
								/* eslint-disable-next-line no-nested-ternary */
								this.getUserInfo.has_wx ?
									(!row.wechat_user_id
										?
										<Button name="index__bind_wechat" size="small" style={{ marginLeft: '5px' }} on-click={() => { this.$emit('showQrcode', row.id); }} type="primary">
											{ this.$t('staff.bind_wechat') }
										</Button>
										:
										<Button name="index__update_wechat" size="small" style={{ marginLeft: '5px' }} on-click={() => { this.$emit('revise', row); }} type="primary">
											{ this.$t('staff.update_wechat') }
										</Button>)
									: ''
							}
						</div>),
				},
			],
		};
	},
	computed: {
		...mapGetters('userToken', [
			'getUserInfo',
		]),
	},
	methods: {

		/**
         * 性别展示
         * @param  {string} sex {性别}
         * @return {string} {性别展示}
         */
		showGender(sex) {
			switch (parseInt(sex, 10)) {
			case 1:

				return this.$t('staff.male');

			case 2:

				return this.$t('staff.female');

			default:

				return this.$t('staff.unknown');
			}
		},

		/**
         * 排序的回调
         * @param  {Object} param {对应列的属性对象,里面包含了column列属性，key值，order排序字段}
         * @return {undefined}
         */
		sortable(param) {
			const search_param = {

				order_by: param.key,

				sort: param.order === 'normal' ? '' : param.order,

			};

			this.$emit('sort', search_param);
		},
	},
};
</script>
